<template>
<uni-shadow-root class="partials-select_product_type_popup-index"><view class="bg"></view>
  <view class="close" @click="cancelSelect">x</view>
  <view class="content">
      <view class="head_title"><text class="head_title_text">产品分类</text></view>
      <view class="box_share_pintuan">
         <scroll-view scroll-y="true" class="pintuan_list"> 
           <view v-for="(item,index) in (productType)" :key="item" class="pintuan_item" :style="'border-bottom:'+(item.active?'2rpx solid '+platformSetting.defaultColor:'')+';color:'+(item.active?platformSetting.defaultColor:'')+';background:'+(item.active?'#fff':'')" data-type="two" :data-item="publicFun.toStringFun(item)" :data-index="index" @click.stop.prevent="bindTypeItem">
              {{item.name}}
           </view>
         </scroll-view>
         
         <scroll-view scroll-y="true" class="product_type_two_list" v-if="productTypeTwo&&productTypeTwo.length!=0" :style="'width:'+(!productTypeTwo||productTypeTwo.length==0?"60%":"33%")">
           <view v-for="(itemTwo,index) in (productTypeTwo)" class="product_type_two_item" :style="'border-bottom:'+(itemTwo.active?'2rpx solid '+platformSetting.defaultColor:'')+';color:'+(itemTwo.active?platformSetting.defaultColor:'')+';background:'+(itemTwo.active?'#fff':'')" data-type="three" :data-item="publicFun.toStringFun(itemTwo)" :data-index="index" @click.stop.prevent="bindTypeItem">
              {{itemTwo.name}}
           </view>
         </scroll-view>
         <view v-if="(!productTypeTwo||productTypeTwo.length==0)" class="none_list" :style="'width:'+((!productTypeTwo||productTypeTwo.length==0)?"60%":"30%")">暂无数据</view>
         
         <view v-if="productTypeTwo&&productTypeTwo.length!=0" style="width:34%">
          <scroll-view scroll-y="true" class="product_type_three_list" v-if="productTypeThree&&productTypeThree.length!=0" style="width:100%">
            <view v-for="(itemThree,index) in (productTypeThree)" class="product_type_two_item" :style="'border-bottom:'+(itemThree.active?'2rpx solid '+platformSetting.defaultColor:'')+';color:'+(itemThree.active?platformSetting.defaultColor:'')+';background:'+(itemThree.active?'#fff':'')" data-type="four" :data-item="publicFun.toStringFun(itemThree)" :data-index="index" @click.stop.prevent="bindTypeItem">
                {{itemThree.name}}
            </view>
          </scroll-view>
          <view v-if="(!productTypeThree||productTypeThree.length==0)" class="none_list" style="width:100%">暂无数据</view>
         </view>
    </view>
    <view class="multi_select_bg">
      <text class="multi_select_btn_clear" @click.stop.prevent="cancelSelect" :style="'color:'+(platformSetting.defaultColor)+';border:1rpx solid '+(platformSetting.defaultColor)">取消</text>
      <text class="multi_select_btn" @click.stop.prevent="sureSelect" :style="'background:'+(platformSetting.defaultColor)+';border:1rpx solid '+(platformSetting.defaultColor)">确定</text>
    </view>
  </view></uni-shadow-root>
</template>
<wxs src="../../public/publicFun.wxs" module="publicFun"></wxs>
<script>

global['__wxRoute'] = 'partials/select_product_type_popup/index'
const app = getApp()
Component({
  properties: {
    productType: {
      type: JSON,
      value: '0',
    },
  },
  data: {
    maskHidden:true,
    productTypeTwo:null,
    productTypeThree:null,
    curProTypeDate:"",

  },
  ready:function(){
    let that=this;
    console.log('=====ready====', that.data.productType)
    if (that.data.productType.length != 0) {
      that.data.productType.unshift({ id:  0, name: "全部" })
      that.setData({ curProTypeDate: that.data.productType[0] })
      for (let i = 0; i < that.data.productType.length; i++) {
        that.data.productType[i].active = false;
      }
      that.data.productType[0].active = true;
      that.setData({ productType: that.data.productType })
    }else{
      that.setData({ curProTypeDate:null })
    }
    console.log('=====ready====', that.data.productType)
    that.setData({
      platformSetting: app.globalData.setting.platformSetting,
    })
  },
  methods: {
    sureSelect:function(){
      let that=this;
      that.triggerEvent('sureSelect', { name: this.data.curProTypeDate.name, id: this.data.curProTypeDate.id}) //myevent自定义名称事件，父组件中使用
    },
    cancelSelect: function () {
      this.triggerEvent('sureSelect', 0) //myevent自定义名称事件，父组件中使用
    },
    /* 点击分类大项 */
    bindTypeItem: function (event) {
      let that=this;
      console.log(event.currentTarget.dataset)
      let itemData = event.currentTarget.dataset.item
      if(itemData){
          itemData=JSON.parse(itemData)
      }
      let itemIndex = event.currentTarget.dataset.index
      let itemType = event.currentTarget.dataset.type
      that.setData({ curProTypeDate: itemData})
      console.log("===itemIndex====", itemIndex, that.data.curProTypeId)
      if (itemType=='two'){
        let productType = that.data.productType
        for (let i = 0; i < productType.length; i++) {
          productType[i].active = false;
          if (i == itemIndex) {
            productType[i].active = true;
          }
        }
        that.setData({ productType: productType })
        if (itemData.id!=0){
          that.getProductType(itemData.id, 'two')
        }
      } else if (itemType == 'three'){
        let productTypeTwo = that.data.productTypeTwo
        for (let i = 0; i < productTypeTwo.length; i++) {
          productTypeTwo[i].active = false;
          if (i == itemIndex) {
            productTypeTwo[i].active = true;
          }
        }
        that.setData({ productTypeTwo: productTypeTwo })
        that.getProductType(itemData.id, 'three')
      }else{
        let productTypeThree = that.data.productTypeThree
        for (let i = 0; i < productTypeThree.length; i++) {
          productTypeThree[i].active = false;
          if (i == itemIndex) {
            productTypeThree[i].active = true;
          }
        }
        that.setData({ productTypeThree: productTypeThree })
      }
    },
    //获取产品分类
    getProductType: function (categoryId,type) {
      console.log("====categoryId=====", categoryId);
      var that = this
      var customIndex = app.globalData.AddClientUrl("/wx_get_categories_only_by_parent.html", { categoryId: categoryId || 0 })
      app.globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: app.globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log("==res====", res.data)
          if (res.data.errcode == 0) {
            if(type=='two'){
              console.log("=========two=========")
              let productTypeTwo = res.data.relateObj;
              if (productTypeTwo.length != 0) {
                for (let i = 0; i < productTypeTwo.length; i++) {
                  productTypeTwo[i].active = false;
                }
              }
              that.setData({ productTypeTwo: productTypeTwo })
            } else if (type == 'three'){
              console.log("=========three=========")
              let productTypeThree = res.data.relateObj;
              if (productTypeThree.length != 0) {
                for (let i = 0; i < productTypeThree.length; i++) {
                  productTypeThree[i].active = false;
                }
              }
              that.setData({ productTypeThree: productTypeThree })
            }
          } else {
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          app.globalData.loadFail()
        }
      })
    },
    goToPintuan:function(e){
      console.log("==goToPintuan===",e)
      let pintuanid;
      if (e.currentTarget.dataset.pintuanid){
        pintuanid = e.currentTarget.dataset.pintuanid
      }
      let data = { way: 'addPintuan', pintuanid: pintuanid}
      this.triggerEvent("goPintuan", { data});
    },
    getPintuanData: function () {
      let that = this;
      let data = this.data.pintuanParam
      var pintuanUrl = app.globalData.AddClientUrl("/wx_find_pintuan_records.html", data, 'post')
      wx.request({
        url: pintuanUrl.url,
        data: pintuanUrl.params,
        header: app.globalData.headerPost,
        method: 'POST',
        success: function (res) {
          console.log('--------add----------')
          console.log(res.data)
          that.setData({ pintuanListData: res.data.relateObj.result })

        },
        fail: function (res) {
          app.globalData.loadFail()
        },
        complete: function () {
          wx.hideLoading()
        }
      })
    },
    closeFun:function(){
      this.triggerEvent('closePintuan', 0) //myevent自定义名称事件，父组件中使用
    },
  }
})
export default global['__wxComponents']['partials/select_product_type_popup/index']
</script>
<style platform="mp-weixin">
.bg{
  position: fixed;
  width:100%;
  height: 100%;
  top:0;
  left: 0;
  background: #000;
  filter:alpha(opacity:60); 
  opacity:0.6;  
  -moz-opacity:0.6;
  -khtml-opacity: 0.6;
  z-index:1000;
}
scroll-view{
  width: 92%
}
.content{
  width:700rpx;
  height:1100rpx;
  position:fixed;
  top:60rpx;
  left:50%;
  background:#fff;
  margin-left:-350rpx;
  z-index:1001;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  border-radius: 10rpx;
}
.close{
  position:fixed;
  top:40rpx;
  right:8px;
  width:50rpx;
  height:50rpx;
  border-radius:50rpx;
  background:#999;
  color:#fff;
  line-height:45rpx;
  text-align:center;
  z-index:1002;
}
.head_title{
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.head_title_text{
  font-size: 28rpx;
}
.box_share_pintuan{
  width: 700rpx;
  height: 1100rpx;
  box-shadow: 2px 2px 10px #999;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
}
.pintuan_list{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:33%;
  box-sizing:border-box;
  font-size:28rpx;
  height:890rpx;
  background:#f8f8f8;
}
.pintuan_item{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding:30rpx;
  color:#666;
  position: relative;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pintuan_item_left{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.pintuan_item_left .user_head{
  height: 80rpx;
  width: 80rpx;
  padding:10rpx;
}
.pintuan_item_data{
  margin-left: 6rpx;
  font-size: 26rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.user_data{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20rpx;
}
.user_data .user_num{
  font-size: 20rpx;
  margin-left: 10rpx;
  color: #999;
}
.pintuan_item_data .pintuan_time{
  color: #aaa;
  font-size: 20rpx;
  letter-spacing: 2rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-left:20rpx;
}
.pintuan_item_right{
  height: 50rpx;
  border-radius: 10rpx;
  padding: 6rpx 20rpx 6rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:20rpx;
  color: #fff;
  font-size: 24rpx;
}
.bottom_title{
  height: 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
}
.bottom_title_text{
  color: #aaa
}
.product_type_two_list{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:30%;
  box-sizing:border-box;
  font-size:28rpx;
  height:890rpx;
  background:#f4f4f4; 
  position: relative;
  left: 0;
  top: 0;
  z-index: 2
}
.product_type_two_item{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding:30rpx;
  color:#666;
  position: relative;
}
.product_type_three_list{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:30%;
  box-sizing:border-box;
  font-size:28rpx;
  height:890rpx;
  background:#f1f1f1; 
  position: relative;
  left: 0;
  top: 0;
  z-index: 2
}
.product_type_three_item{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding:30rpx;
  color:#666;
  position: relative;
}
.none_list{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 0;
  top: 0;
  padding:30rpx;
  z-index: 2;
  width:30%;
  font-size: 28rpx;
  color: #999;
  box-sizing:border-box;
}
.multi_select_bg{
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height:100rpx;
  font-size:26rpx;
  z-index: 10;
}
.multi_select_btn{
  padding: 10rpx 50rpx;
  color: #fff;
  border-radius: 16rpx;
  margin-left: 10rpx;
  width:60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.multi_select_btn_clear{
  padding: 10rpx 50rpx;
  background: #fff;
  border-radius: 10rpx;
  width:60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>